<template>
  <div>
    <el-row class="upload-box" type="flex" justify="center" align="middle" @click.native="chooseFile">
      <slot>
        <template v-if="!multiple">
          <el-image v-if="value" :src="value" />
          <i class="el-icon-plus" v-else></i>
        </template>
      </slot>
    </el-row>

    <el-dialog :visible.sync="visible" width="950px" scrollable title="上传" :close-on-click-modal="false">
      <uploadPictures
        :isChoice="isChoice"
        @getPic="getPic"
        @getPicD="getPicD"
        :gridBtn="gridBtn"
        :gridPic="gridPic"
        v-if="visible"
      ></uploadPictures>
    </el-dialog>
  </div>
</template>

<script>
import uploadPictures from '@/components/uploadPictures';
export default {
  model: {
    event: 'change',
  },
  components: {
    uploadPictures,
  },
  data() {
    return {
      visible: false,
      activeIndex: 0,
      gridPic: {
        xl: 6,
        lg: 8,
        md: 12,
        sm: 12,
        xs: 12,
      },
      gridBtn: {
        xl: 4,
        lg: 8,
        md: 8,
        sm: 8,
        xs: 8,
      },
    };
  },
  props: {
    value: [String, Array],
    disabled: {
      type: Boolean,
      default: false,
    },
    multiple: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    isChoice() {
      return this.multiple ? '多选' : '单选';
    },
  },
  methods: {
    chooseFile() {
      this.visible = true;
    },
    // 获取单张图片信息
    getPic(pc) {
      this.$emit('change', pc.att_dir);
      this.visible = false;
    },
    // 获取多张图信息
    getPicD(pc) {
      this.$emit('change', pc);
      this.visible = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.upload-box {
  width: 50px;
  height: 50px;
  border: 1px dotted var(--prev-border-color-base);
  cursor: pointer;
}
</style>
